<template>
	<view>
		<view class="form">
			<view class=""
				style="width: 100%;height: 300rpx;display: flex;align-items: center;justify-content: center;">
				<image v-if="!userInfo.zhengCard" style="width: 500rpx;height: 300rpx;" src="/static/888.png"
					@click="updateHeadimg(1)"></image>
				<image v-else style="width: 500rpx;height: 300rpx;" :src="userInfo.zhengCard" @click="updateHeadimg(1)">
				</image>
			</view>
			<view class=""
				style="width: 100%;height: 300rpx;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
				<image v-if="!userInfo.fanCard" style="width: 500rpx;height: 300rpx;" src="/static/999.png"
					@click="updateHeadimg(2)"></image>
				<image v-else style="width: 500rpx;height: 300rpx;" :src="userInfo.fanCard" @click="updateHeadimg(2)">
				</image>
			</view>
			<uv-form labelPosition="left" :model="userInfo" ref="uvFormRef" label-width="70">
				<uv-form-item label="姓名" prop="userInfo.contactsName" borderBottom ref="item1">
					<uv-input v-model="userInfo.contactsName" border="none" placeholder="请输入姓名"></uv-input>
				</uv-form-item>
				<uv-form-item label="电话" prop="userInfo.mobile" borderBottom ref="item1">
					<uv-input v-model="userInfo.mobile" border="none" placeholder="请输入电话"></uv-input>
				</uv-form-item>
				<uv-form-item label="身份证号" prop="userInfo.cards" borderBottom ref="item1">
					<uv-input v-model="userInfo.cards" border="none" placeholder="请输入身份证号"></uv-input>
				</uv-form-item>
				<view class="label">
					<view class="title">行政区划</view>
					<view class="input">
						<picker mode="region" :value="region" @change="selectRegion">
							<view class="picker">
								<block v-for="(item, index) in region" :key="index">
									<text v-if="index > 0">-</text>
									{{ item }}
								</block>
							</view>
						</picker>
					</view>
				</view>

				</uv-form-item>
				<view class="name">详细地址</view>
				<uv-textarea v-model="userInfo.details" placeholder="请输入内容"></uv-textarea>
				<uv-form-item label="领养门店" prop="userInfo.cards" borderBottom ref="item1">
					<uv-input v-model="userInfo.businessName" disabled border="none" placeholder="领养门店" disabled-color="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="领养品种" prop="userInfo.cards" borderBottom ref="item1">
					<uv-input v-model="userInfo.varietyName" disabled border="none" placeholder="领养品种" disabled-color="none"></uv-input>
				</uv-form-item>
				<uv-button type="primary" text="确定" customStyle="margin-top: 30px;border-radio:20rpx;background:#F54319;border:none"
					@click="btnsure"></uv-button>
			</uv-form>
			<uv-popup ref="popup" round="20">
						<view class="" style="width: 600rpx;padding: 20rpx;">
							<view class="name" style="text-align: center;font-weight: 700;margin-bottom: 20rpx;font-size: 36rpx;">选择套餐</view>
							<uv-radio-group v-model="radiovalue" placement="row" @change="changeRadio">
								<uv-radio customStyle="margin-right:30rpx" v-for="(item, index) in fenList" :key="index" :label="item.num" :name="item.num"
									>{{item.num}}期
									</uv-radio>
							</uv-radio-group>
							<view class="" style="margin-top: 50rpx;">
								订单分{{radioInfo.num}}期,每期{{radioInfo.money}}元
							</view>
							<uv-button type="primary" text="提交" customStyle="margin-top: 80rpx;border-radio:20rpx;background:#F54319;border:none"
								@click="submit"></uv-button>
						</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	import {
		insertPlugsFormData,
		uploadImages,
		plugsPerformanceList,
		generate,
		getSignTemplateList,
		signTemplate
	} from '../../../utils/api.js';
	export default {
		data() {
			return {
				radiovalue:'',
				radioInfo:{},
				userInfo: {
					contactsName: '',
					mobile: '',
					cards: '',
					zhengCard: '',
					fanCard: '',
					address: '浙江省杭州市余杭区',
					details: '',
					dataId: '',
					status: 0,
					num:'',
					money:'',
					formData: [],
					businessName: '',
					varietyName:''
					
				},
				performanceNumList:[],
				info: {},
				nameInfo: {},
				formId:24,
				fenList: [],
				lateList:[],
				dataName:'',
				signTemplateId:'',
				region: ['浙江省', '杭州市', '余杭区'],
				date: Date.parse(new Date()), //现在时间
			};
		},
		onLoad(option) {
			this.info = JSON.parse(decodeURIComponent(option.info));
			this.nameInfo = JSON.parse(decodeURIComponent(option.name));
			this.userInfo.dataId = this.nameInfo.id;
			this.formId = this.info.id;
			this.userInfo.businessName = this.info.businessName;
			this.userInfo.varietyName = this.nameInfo.jsonViewData.name;
			
			console.log(this.info,this.nameInfo);
			this.nameInfo.jsonViewData.filterCriteria
			console.log(this.nameInfo.jsonViewData.filterCriteria);
		},
		onShow() {
			
			this.getTemplateList()
		},
		methods: {
			
			getTemplateList(){
					getSignTemplateList()
					.then(res=>{
						console.log(res);
						if(res.code==200){
							this.lateList=res.body.data.signTemplates
							console.log(this.lateList);
						}
					}).then(()=>{
						this.getfenList()
					})
			},
			
			getfenList() {
				let data = {
					page: 1,
					size: 100,
					userServiceToken:this.userToken
				}
				plugsPerformanceList(data)
				.then(res => {
					if (res.code == 200) {
						this.fenList = res.body.list
						this.radioInfo=this.fenList[0]
						this.radiovalue=this.fenList[0].num
						this.userInfo.num=this.radioInfo.num
						this.userInfo.money=this.radioInfo.money
						if(this.nameInfo.jsonViewData.filterCriteria=='猫'){
							this.dataName='猫粮购买合同.'+this.userInfo.num
						}else if(this.nameInfo.jsonViewData.filterCriteria=='狗'){
							this.dataName='狗粮购买合同.'+this.userInfo.num
						}
						console.log(this.lateList,666);
						let lateInfo = this.lateList.find(item => this.dataName ==  item.signTemplateName);
						this.signTemplateId=lateInfo.signTemplateId
						console.log(this.dataName,this.signTemplateId);
						this.getgenerate()
					}
				})
				
			},
			getgenerate(){
				let data={
					index:this.radioInfo.num,
					money:this.radioInfo.money,
				}
				generate(data).then((ress)=>{
					if(ress.code==200){
						this.userInfo.formData=ress.body
						this.performanceNumList=ress.body
						
					}
				})
			},
			changeRadio(e){
				console.log(e);	
				let list=[]
				list = this.fenList.filter(item => item.num === e)
				 this.radioInfo=list[0] 
				 this.userInfo.num=this.radioInfo.num
				 this.userInfo.money=this.radioInfo.money
				 if(this.nameInfo.jsonViewData.filterCriteria=='猫'){
				 	this.dataName='猫粮购买合同.'+this.userInfo.num
				 }else if(this.nameInfo.jsonViewData.filterCriteria=='狗'){
				 	this.dataName='狗粮购买合同.'+this.userInfo.num
				 }
				 console.log(this.lateList,666,this.dataName);
				 
				 let lateInfo = this.lateList.find(item => this.dataName ==  item.signTemplateName);
				 console.log(lateInfo);
				 this.signTemplateId=lateInfo.signTemplateId
				 this.getgenerate()
				console.log(this.radioInfo);
			},
			selectRegion(e) {
				this.region = e.detail.value;
				this.userInfo.address = this.region[0] + '' + this.region[1] + '' + this.region[2];
			},
			dateFormat(time) {
				//将时间戳格式转换成年月日时分秒
				let date = new Date(time);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
				let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				let strDate = Y + M + D + h + m + s;
				return strDate
			},

			updateHeadimg(index) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						console.log(res);
						let data = {
							file: res.tempFilePaths[0], //你要传的临时文件
							type: 1
						};
						
						uploadImages(data).then(ress => {
							if (ress.code == 200) {
								if (index == 1) {
									that.userInfo.zhengCard = ress.body;
									that.ocrIdentify(res.tempFilePaths[0])
								} else if (index == 2) {
									that.userInfo.fanCard = ress.body;
								}
							}
						});
					}
				});
			},
			ocrIdentify(tempFilePath) {
				let that=this
				const invokeRes = wx.serviceMarket.invokeService({
					service: 'wx79ac3de8be320b71',  //固定的不要动
					api: 'OcrAllInOne',             //固定的不要动
					data: {
						// 用 CDN 方法标记要上传并转换成 HTTP URL 的文件
						img_url: new wx.serviceMarket.CDN({
							type: 'filePath',
							filePath: tempFilePath,
						}),
						data_type: 3,        
						ocr_type: 1        // 1是身份证识别  7是营业执照识别
					},
					success: function(res) { 
						//打印这个res  就是你想要的结果
						console.log(res,788);
						let data=res.data.idcard_res
						that.userInfo.contactsName=data.name.text
						that.userInfo.cards=data.id.text
						that.userInfo.details=data.address.text
					}
				})
			},
			btnsure(){
				let that=this
				if (!that.userInfo.contactsName) {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					});
					return;
				} else if (!that.userInfo.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return;
				} else if (!that.userInfo.zhengCard) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片'
					});
					return;
				} else if (!that.userInfo.fanCard) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证反面照片'
					});
					return;
				}
				this.$refs.popup.open('center');
			},
			submit() {
				let that=this
				uni.showModal({
					title:'请输入领养编码',
					editable:true,
					success(res) {
						console.log(res);
						if(res.confirm){
							if(res.content=='141242'){
								that.$refs.popup.close();
								
								let data = {
									dataJson: JSON.stringify(that.userInfo),
									formId: that.formId,
									userId: uni.getStorageSync('userInfo').id,
									performanceNumList:that.performanceNumList
								};
								insertPlugsFormData(data).then(res => {
									if (res.code == 200) {
										setTimeout(() => {
											uni.showModal({
												title: '提示',
												content: '信息提交成功，即将向您发送签约短信',
												showCancel: false,
												success: () => {
													uni.reLaunch({
														url:'/pages/index/lingyang/qianshu'
													})
													let dd={
														"address": that.userInfo.details,
														  "formDataId": res.body,
														  "idCard": that.userInfo.cards,
														  "name": that.userInfo.contactsName,
														  "phone": that.userInfo.mobile,
														  "signTemplateId":that.signTemplateId
													}
													signTemplate(dd).then(()=>{
														
													})
													
												}
											});
										}, 500);
									}
								});
							}else{
								uni.showModal({
									title: '提示',
									content: '编码输入错误，请重新输入',
									showCancel: false,
									success: () => {
									}
								});
							}
						}else if(res.cancel){
							
						}
					}
				})
				return
				
			}
		}
	};
</script>

<style lang="scss">
	page {
		padding: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.image {
		image {
			border-radius: 20rpx;
		}
	}

	.form {
		padding: 20rpx;

		.name {
			font-size: 28rpx;
			color: $uni-text-color;
			margin: 20rpx 0;
		}

		.label {
			display: flex;
			align-items: center;
			height: 120rpx;
			margin: 0 auto;
			border-bottom: 1px solid #efefef;

			.title {
				width: 140rpx;
				color: #1c1c1c;
				font-size: 28rpx;
			}

			.input {
				flex: 1;
				height: 70rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				justify-content: space-between;

				input {
					width: 92%;
					height: 100%;
					color: #1c1c1c;
					font-size: 28rpx;
					padding-left: 20rpx;
				}

				.local {
					width: 70rpx;
					height: 70rpx;
					background-color: #efefef;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				picker {
					width: 92%;
					height: 100%;
					line-height: 70rpx;
					color: #1c1c1c;
					font-size: 28rpx;
					padding-left: 20rpx;

					.picker {
						width: 100%;

						text {
							padding: 0 10rpx;
							color: #bbb;
						}
					}
				}
			}
		}
	}
</style>